<template>
  <elestatement :pop='pop'
                v-loading="loading"
                :element-loading-text="loadingText"
                element-loading-spinner="el-icon-warning-outline"
                element-loading-background="rgba(0, 0, 0, 0.6)">
    <slot slot="close"></slot>
    <div class="condiv" slot="content">
      <div style="width:100%;height:100%" class="echarts2or2" :id="id"></div>
    </div>

  </elestatement>
</template>
<style lang="scss">
  .element2x2{
    .condiv{
      width:560px;
      height:300px;
      overflow: hidden;
      .echarts2or2{
        width: 100%;
        height:100%;
      }
    }
  }

</style>
<script>
  let echarts = require("echarts");
  let moment = require("moment");
  import elestatement from "@/components/real-time/real-time-module/common/size/Element2x2";
  export default {
    props: {
      pop:{
        default:function(){
          return {
            title: "客流男女年龄比例",							//报表标题
            helphint: [
              {title: "客流男女年龄比例", text: ""},				//第一条信息为提示标题 不给text
            ]
          }
        }
      },
      option:{},
      loading:'',
      loadingText:'',
    },
    components: {
      elestatement:elestatement
    },
    data(){
      return {
        myChart:null,
        id:"echart"+new Date().getTime()+Math.random()*10000,

      }
    },
    created() {},
    mounted() {
      this.myChart = echarts.init(document.getElementById(this.id));
      this.$Bus.$on('WinResize', () => {
        this.myChart.resize();
      });
    },
    beforeDestroy()
    {
      this.$Bus.$off('WinResize');
    },
    methods: {
      setOption(iskong=false){
        if(iskong) {
          this.myChart.setOption({},true);
        } else{
          this.myChart.setOption(this.option,true);
        }
      },

    },
    watch: {

    },

  };
</script>
